/* rem 750 */
rem()
  (round(arguments / 75 * 1000) / 1000)rem
.fn-ellipsis
  word-break break-all
  text-overflow ellipsis
  white-space nowrap
  overflow hidden
.fn-ellipsis2
  word-break break-all
  text-overflow ellipsis
  display -webkit-box
  -webkit-line-clamp 2
  -webkit-box-orient vertical
  overflow hidden
body,div
  margin 0 
  padding 0
body
  background #000
  -webkit-text-size-adjust 100%
.header
  position relative
  margin auto
  width rem(750)
  height rem(300)
  img
    width 100%
    height 100%
  .time-box
    position absolute
    bottom 0
    width rem(750)
    height rem(112)
    background linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,0.6) 100%)
  .timebar
    position absolute
    right rem(21)
    &.text
      bottom rem(22)
      color #fff
      font-size rem(28)
    span
      display inline-block
      // margin 0 rem(-12)
      padding 0 rem(10)
      min-width rem(20)
      height rem(40)
      line-height @height
      font-size rem(28)
      text-align center
      color #fff
      &:nth-child(2n+1)
        border-radius rem(6)
        background-color #B0926A
        color #000
.tabbar
  // padding rem(23) 0
  width rem(750)
  height rem(100)
  background rgba(0,0,0,1)
  box-shadow 0 rem(4) rem(8) 0 rgba(255,255,255,0.2)
  box-sizing border-box
  p
    line-height rem(70)
  &.fixed
    position fixed
    z-index 10
    top 0
  .tabcell
    display inline-block
    margin-left rem(102)
    width rem(102)
    height rem(54)
    line-height @height
    text-align center
    border-radius rem(27)
    border 2px solid transparent
    color #999
    font-size rem(32)
  .tabcell-active
    color #fff
    border 2px solid #fff
.tab
  display none
  .active-box
    padding rem(24)
    background-color #000
    .card-column:nth-child(2n)
      margin-left rem(-5)
    
  .active-abstract
    margin-bottom rem(32)
    font-size rem(32)
    color #B0926A
    .btn
      color #fff
      width rem(88)
      font-size rem(28)
      background rgba(255,255,255,0.2)
      border-radius rem(22)
  .introduct
    position relative
    margin-top rem(-15)
    margin-bottom rem(22)
    padding rem(32) rem(24)
    width rem(702)
    border-radius rem(8)
    background-color #333
    color #fff
    font-size rem(26)
    line-height rem(36)
    box-sizing border-box
    p
      color #fff
      font-size rem(26)
      line-height rem(36)
    &:before
      position absolute
      top rem(-35)
      right rem(25)
      content ''
      display block
      border rem(20) solid #333
      border-top-color transparent
      border-left-color transparent
      border-right-color transparent
  .list,.waterfall
    margin-top rem(-22)
    .card-row:first-child
      margin-top rem(44)
    .bigimg:first-child
      margin-top rem(62)
    .bigimg:last-child
      border-bottom none
  .waterfall
    .leftfall,.rightfall
      float left
      width rem(340)
      overflow auto
    .rightfall
      margin-left rem(20)
  // .list1
  //   -webkit-column-count 2
  //   -moz-column-count 2
  //   column-count 2
  //   -moz-column-gap rem(10) 
  //   -webkit-column-gap rem(10)
  //   column-gap rem(10)


  //排行榜
  .lead-box
    margin 0 rem(44)
    position relative
    .left-info
      position absolute
      top rem(34)
      width rem(30)
      color #666
      font-size rem(28)
      text-align center
    .right-info
      margin-left rem(48)
      // height rem(108)
      line-height  @height
      border-bottom 2px solid #DADADA
      .leadname 
        display inline-block
        padding rem(40) 0
        width rem(450)
        // height rem(108)
  .media-info
    position relative
    padding-left rem(70)
    .headimg
      position absolute
      left 0
      top rem(30)
      width rem(48)
      height rem(48)
      border-radius 50%
    p
      word-break break-all !important
      color #2B3145
      font-size rem(34)
    .infotext
      display inline-block
      height 100%
      font-size rem(34)
      color #2B3145
    .righttext
      margin-top rem(40)
      font-size rem(28)
      color #666

  //活动规则
  .rule-box
    padding rem(40) rem(32) 0
    color #2B3145
    font-size rem(30)
    line-height rem(48)
    p
      margin-bottom rem(48)

.tab-active
  display block

//列式卡片
.card-column
  display inline-block
  margin-top rem(22)
  width rem(340)
  border-radius rem(8)
  .img-box
    position relative
    width 100%
    height rem(255)
    img
      display block
      width 100%
      height 100%
      border-top-left-radius rem(8)
      border-top-right-radius rem(8)
    .idxlogo
      left rem(20)
      top rem(16)
      width rem(62)
      height rem(48)
  .img-focus
    position absolute
    top 0
    width 100%
    height rem(255)
    background rgba(0,0,0,0.15)
    img
      display block
      margin rem(16) rem(20)
      width rem(300)
      height rem(224)
      border 1px solid #fff
      border-radius 0
  .card-content
    background #222
    padding rem(17) rem(16) rem(32)
    border-bottom-left-radius rem(8)
    border-bottom-right-radius rem(8)
    .title
      position relative
      margin-bottom rem(15)
      padding-left rem(12)
      line-height rem(48)
      word-break break-all !important
      // height rem(96)
      font-size rem(34)
      color #fff
      b
        position absolute
        left 0
        top rem(5)
        width rem(6)
        height rem(36)
        background #A88C66
    .detail
      line-height rem(48)
      font-size rem(28)
      color #fff
      &::before
        content ''
        display inline-block
        margin-right rem(8)
        width rem(26)
        height rem(24)
        background url(../img/voting.png) no-repeat center
        background-size 100%
      &.didact::before
        background url(../img/voted.png) no-repeat center
        background-size 100%
    .action
      margin rem(30) auto rem(15)
      width rem(290)
      height rem(62)
      .btn
        height rem(62)
        line-height @height
        border-radius rem(31)
        color #fff
        background-color #B0926A
        box-sizing border-box
      .outbtn
        background-color transparent
        border 1px solid #B0926A
      .forbidbtn
        background-color #999

//media 卡片
.card-row
  padding rem(40) 0
  // margin-left rem(22)
  border-top 2px solid #292929
  &.bigimg
    padding-top 0
    position relative
    margin-top rem(40)
    border-top none
    border-bottom 2px solid #292929
  .media
    position absolute
  .media-img
    width rem(180)
    height rem(180)
    border-radius rem(8)
  .idxlogo
    position absolute
    top rem(0)
    left rem(8)
  .card-content
    margin-left rem(204)
    .title
      width rem(498)
      word-break break-all !important
      line-height rem(48)
      // height rem(96)
      font-size rem(34)
      color #fff
  .basic-info
    margin-top rem(12)
    line-height rem(62)
    overflow hidden
  .actdata
    position relative
    display inline-block
    color #B0926A
    font-size rem(32)
    line-height(62)
    &:before
      content ''
      display inline-block
      margin-right rem(8)
      width rem(26)
      height rem(24)
      background url(../img/voted.png) no-repeat center
      background-size 100%
  .btn
    float right
    margin-top  rem(10)
    width rem(210)
    border-radius rem(36)
    color #fff
    background-color #B0926A
    &.outbtn
      background-color transparent
      border 1px solid #B0926A
    &.forbidbtn
      background-color #999

.bigimg
  .media-img
    // width rem(702)
    width 100%
    height rem(234)
  .idxlogo
    position absolute
    top rem(0)
    left rem(20)
  .title
    line-height rem(48)
    word-break break-all !important
    color #fff
    font-size rem(32)
    
.cardtxt
  .card-content
    margin-left rem(80)
    .title
      width rem(620)
//页面标志
.idxlogo
  position absolute
  width rem(62)
  height rem(48)
  line-height rem(42)
  background url(../img/idxbg.png) no-repeat center
  background-size 100%
  color #fff
  font-size rem(34)
  text-align center
.hoticon::before
  content''
  display inline-block
  margin-right rem(12)
  width rem(22)
  height rem(26)
  background url(../img/hoticon.png) no-repeat center
  background-size 100%
.first-icon, .two-icon, .three-icon
  &::before
    content''
    display inline-block
    width rem(30)
    height rem(38)
    background url(../img/firsticon.png) no-repeat center
    background-size 100%
.two-icon::before
  background url(../img/twoicon.png) no-repeat center
  background-size 100%
.three-icon::before
  background url(../img/threeicon.png) no-repeat center
  background-size 100%
